<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<link rel="stylesheet" href="lib/css/musicgrid.css" type="text/css" media="screen" />

<link rel="stylesheet" href="lib/css/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/css/pager.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/css/examples.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/css/columnpicker.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />

<!-- Jquery -->
<script language="JavaScript" src="lib/jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

<script language="JavaScript" src="lib/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<script language="JavaScript" src="lib/jquery/jquery.rule-1.0.1.1-min.js"></script>
<script language="JavaScript" src="lib/jquery/jquery.event.drag.custom.js"></script>   

<script language="Javascript" src="lib/js/musicgrid.js"></script>

<script language="JavaScript" src="lib/js/firebugx.js"></script>
<script language="JavaScript" src="lib/js/editors.js"></script>
<script language="JavaScript" src="lib/js/grid.js"></script>
<script language="JavaScript" src="lib/js/model.js"></script>
<script language="JavaScript" src="lib/js/pager.js"></script>
<script language="JavaScript" src="lib/js/columnpicker.js"></script>

</head>
<body>

<!-- For info on the grid control check out: http://www.nicblue.com/gridnic/ -->    
<div id="myGrid" style="width:99%; height:575px"></div>

<script>
<!--

// mp3tunes login
var token = 9733929093;
var email = "kendall@mp3tunes.com";
var pass = "mp3tunes";
var login = "https://shop.mp3tunes.com/api/v1/login?output=json&username="+ email +"&password="+ pass +"&partner_token="+ token;

//alert(login);

var dataView;
var grid;
var data = [];
var selectedRowIds = [];

var columns = [
	{id:"sel", name:" ", field:"num", behavior:"select", cssClass:"cell-selection", width:30, sortable:true, resizable:false, unselectable:true },
	{id:"name", name:"Name", field:"name", width:400, cssClass:"cell-title", sortable:true},
	{id:"time", name:"Time", field:"time", width:90, sortable:true},
	{id:"artist", name:"Artist", field:"artist", width:120, sortable:true},
	{id:"album", name:"Album", field:"album", width:120, sortable:true},
	{id:"genre", name:"Genre", field:"genre", width:120, sortable:true},
	{id:"dateadded", name:"Date Added", width:100, cssClass:"cell-effort-driven", sortable:true}
];

var options = {
	editable: false,
	enableAddRow: false,
	enableCellNavigation: true,
	asyncEditorLoading: false,
	forceFitColumns: true,
	secondaryHeaderRowHeight: 20
};

var sortcol = "artist";

$(".grid-header .ui-icon")
	.addClass("ui-state-default ui-corner-all")
	.mouseover(function(e) {
		$(e.target).addClass("ui-state-hover")
	})
	.mouseout(function(e) {
		$(e.target).removeClass("ui-state-hover")
	});

$(function()
{
	// prepare the data
	for (var i=0; i<500; i++) {
		var d = (data[i] = {});

		d["id"] = "id_" + i;
		d["num"] = i;
		d["name"] = "Song Name";
		d["time"] = "00:00";
		d["artist"] = "Artist Name";
		d["album"] = "Album Name";
		d["genre"] = "Genre";
		d["dateadded"] = "00/00/0000";
	}

	dataView = new GridNic.Data.DataView();
	grid = new GridNic.Grid($("#myGrid"), dataView.rows, columns, options);
	var columnpicker = new GridNic.Controls.ColumnPicker(columns, grid, options);

	grid.onSort = function(sortCol, sortAsc) {
		sortdir = sortAsc ? 1 : -1;
		sortcol = sortCol.field;

		var percentCompleteValueFn = function() {
			var val = this["artist"];
			if (val < 10)
				return "00" + val;
			else if (val < 100)
				return "0" + val;
			else
				return val;
		}
		dataView.fastSort((sortcol=="artist")?percentCompleteValueFn:sortcol,sortAsc);
	};

	dataView.onRowCountChanged.subscribe(function(args) {
		grid.updateRowCount();
	});

	dataView.onRowsChanged.subscribe(function(rows) {
		grid.removeRows(rows);
		grid.render();

		if (selectedRowIds.length > 0)
		{
			// since how the original data maps onto rows has changed,
			// the selected rows in the grid need to be updated
			var rows = [];
			for (var i = 0; i < selectedRowIds.length; i++)
			{
				var idx = dataView.getRowById(selectedRowIds[i]);
				if (idx != undefined)
					rows.push(idx);
			}

			grid.setSelectedRows(rows);
		}
	});

	dataView.beginUpdate();
	dataView.setItems(data);
	dataView.endUpdate();

	$("#gridContainer").resizable();
})

//-->
</script>

</body>
</html>
